<template>
  <div class="wrap">
    <div class="title">充值余额</div>
    <div class="content">
      <div class="left">
        <img src="@/assets/menuStatus5.png" alt="" class="menuStatus" />
        <em>充值金额</em>
      </div>
      <div class="right">
          <input type="number" placeholder="请输入金额" v-model="money">
      </div>
    </div>
    <div class="btnSure" @click="createRechargePreOrder">确认充值</div>
  </div>
</template>

<script>
import { RadioGroup } from "vant";
import { apiCreateRechargePreOrder,apiPlatformGetUserShopDetails,apiRechargeOrderOrderPay } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      money:'100',//输入的钱
      shopId:'',
      resPayInfo:"",
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getShopDetails();
  },
  methods: {
     //店铺详情api获取商铺id：
    getShopDetails() {
      apiPlatformGetUserShopDetails({}).then((res) => {
        this.shopId = res.data.id;
      });
    },
    //创建支付订单 获取订单编号
    createRechargePreOrder() {
      if(this.money==""){
        this.$toast.fail('请输入充值金额')
        return
      }
      apiCreateRechargePreOrder({
        price:this.money,
        shopId:this.shopId,
        type:0
      }).then((res) => {
        this.getRechargeOrderOrderPay(res.data)
      });
    },
     //根据订单id获取微信支付需要的信息
    getRechargeOrderOrderPay(orderNumber) {
      apiRechargeOrderOrderPay({
        orderNum: orderNumber,
        type: 0
      }).then((res) => {
        if (res.code == 200) {
          this.resPayInfo = res.data
          this.onBridgeReady();
        }
      });
    },
    //微信支付：
    onBridgeReady() {
      var that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: that.resPayInfo.appId, //公众号ID，由商户传入
          timeStamp: that.resPayInfo.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: that.resPayInfo.nonceStr, //随机串
          package: that.resPayInfo.package,
          signType: that.resPayInfo.signType, //微信签名方式：
          paySign: that.resPayInfo.sign, //微信签名
        },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            that.$toast.success('充值成功')
            that.$router.push({
              path: "/pages/bMyWallet",
              query: {
                //传递参数
              },
            });
          }
        }
      );
    },
    
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
  },
};
</script>

<style scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  padding: 20px;
}
.content {
  width: 95%;
  height: 90px;
  background: #ffffff;
  border-radius: 20px;
  margin: 0 auto;
}
.left {
  float: left;
  margin-left: 13px;
  margin-top: 25px;
  height: 46px;
  display: flex;
  align-items: center;
}
.menuStatus {
  width: 46px;
}
.left em {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  padding-left: 6px;
}
.right {
  float: right;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  margin-top: 30px;
  margin-right: 25px;
}
input{
  width: 100px;
  height: 30px;

}
.btnSure {
  width: 95%;
  position: fixed;
  left: 2.5%;
  bottom: 20px;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
</style>
